{% extends 'page_frame.html' %}
{% load static %}


{% block static_import %}
    {{ block.super }}
    <!-- 自定义的样式 开始 -->
    <link rel="stylesheet" href="{% static 'css/home.css' %}">
    <!-- 自定义的样式 结束-->
{% endblock %}

{% block brand_title %}
    hello
{% endblock %}

{% block content %}
    <!--内容部分开始-->
    <div class="content border" style="background: black;min-height: 100px">
        <div class="cmd-text"> Warning: 正在叶的计算机网络实验小网站 ...</div>
        <div class="cmd-text"> Error: 您的计算机网络成绩余额不足 <span class="shine-line">_</span></div>
    </div>
    <div class="content border menu-list">
        <a href="{% url 'visitor_list:visitor_list' %}" class="menu-item">
            <div class="item-button">
                <div class="item-button-title">访问设备列表</div>
            </div>
        </a>
        <a href="{% url 'dashboard:dashboard' %}" class="menu-item">
            <div class="item-button">
                <div class="item-button-title">访问设备分布总览</div>
            </div>
        </a>

        <div class="card overflow-auto" style="height: 210px;min-width: 500px">
            <div class="row g-0">
                <div class="col-md-4">
                    <svg t="1634168787590" class="img-fluid rounded-start" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4355" width="200" height="200"><path d="M213.696 348.032c-28.16 0-51.2 23.04-51.2 51.2V604.8c0 28.096 23.04 51.2 51.2 51.2s51.2-23.04 51.2-51.2V399.168c0-28.16-23.04-51.136-51.2-51.136z" fill="" p-id="4356"></path><path d="M213.696 633.6a28.8 28.8 0 0 1-28.8-28.8V399.168a28.8 28.8 0 0 1 57.6 0V604.8a28.8 28.8 0 0 1-28.8 28.8z" fill="#1FDB00" p-id="4357"></path><path d="M831.68 348.032c-28.16 0-51.2 23.04-51.2 51.2V604.8c0 28.096 22.976 51.2 51.2 51.2s51.2-23.04 51.2-51.2V399.168a51.2 51.2 0 0 0-51.2-51.136z" fill="" p-id="4358"></path><path d="M831.68 633.6a28.8 28.8 0 0 1-28.8-28.8V399.168a28.8 28.8 0 0 1 57.6 0V604.8a28.8 28.8 0 0 1-28.8 28.8z" fill="#1FDB00" p-id="4359"></path><path d="M294.656 709.184c0 24.64 20.16 44.8 44.8 44.8h43.008v116.8c0 28.096 23.04 51.2 51.2 51.2s51.2-23.04 51.2-51.2v-116.8h81.6v116.8c0 28.096 22.976 51.2 51.2 51.2s51.2-23.04 51.2-51.2v-116.8h38.976c24.64 0 44.8-20.16 44.8-44.8V348.032H294.656v361.152z" fill="" p-id="4360"></path><path d="M617.664 899.648a28.8 28.8 0 0 1-28.8-28.8v-139.2H462.464v139.2a28.8 28.8 0 0 1-57.6 0v-139.2H339.52a22.4 22.4 0 0 1-22.4-22.464V370.432h413.184v338.752a22.4 22.4 0 0 1-22.4 22.464h-61.376v139.2c0 15.808-12.992 28.8-28.864 28.8z" fill="#1FDB00" p-id="4361"></path><path d="M297.92 320h451.52a225.28 225.28 0 0 0-113.28-163.456l51.712-51.712a11.328 11.328 0 0 0 0-15.808h-0.064a11.2 11.2 0 0 0-15.808 0l-52.032 52.096c-1.728 1.664-2.24 3.968-2.624 6.144A219.456 219.456 0 0 0 528.704 128h-10.048c-27.52 0-53.824 5.184-78.208 14.4-0.256-0.384-0.128-0.96-0.448-1.28l-52.096-52.096a11.2 11.2 0 0 0-15.808 15.808l47.488 47.552A225.088 225.088 0 0 0 297.92 320z m325.376-120.768a25.984 25.984 0 1 1 0 51.904 25.984 25.984 0 0 1 0-51.904z m-197.952 0a25.984 25.984 0 1 1 0 51.904 25.984 25.984 0 0 1 0-51.904z" fill="" p-id="4362"></path><path d="M325.568 297.6a202.88 202.88 0 0 1 55.296-91.456 48.448 48.448 0 1 0 38.592-28.928 197.696 197.696 0 0 1 99.2-26.816h9.984c35.648 0 69.568 9.664 98.944 26.624a48.448 48.448 0 1 0 41.024 31.04c24.768 24.256 43.392 54.912 53.184 89.472H325.568z" fill="#1FDB00" p-id="4363"></path></svg>
                </div>
                <div class="col-md-8">
                    <div class="card-body card-body-addition">
                        <h5 class="card-title border-bottom" style="font-weight: 600">访问设备：{{ device }}</h5>
                        <p class="card-text">设备平台：{{ raw_system }}</p>
                        <p class="card-text">当前 IP：{{ ip }}</p>
                        <p class="card-text">浏览器：{{ raw_browser }}</p>
                        <p class="card-text">UserAgent：{{ user_agent }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--内容部分结束-->

    <!--尾部个人标签开始-->
    <div class="card mb-3 card-addition">
        <div class="row g-0">
            <div class="col-md-4">
                <img src="{% static 'images/yips.jpg' %}" alt="..." class="img-fluid" style="max-width: 110px;">
            </div>
            <div class="col-md-8">
                <div class="card-body">
                    <h5 class="card-title" style="font-weight: 600">你好，我是庸了个白</h5>
                    <p class="card-text">
                        一个在 python 领域苟且偷生的菜鸟
                    </p>
                </div>
            </div>
        </div>
    </div>
    <!--尾部个人标签结束-->
{% endblock %}